<template>
  <view v-if="shenheStatus == 0" class="md-page">
    <view class="label-title" v-if="mdData.id">已选门店</view>
    <view
      class="md-box"
      v-if="mdData.name"
      @click="toBack"
      :class="!mdData.id ? 'not-select' : ''"
    >
      <view class="md-logo">
        <image :src="mdData.cover_url" mode="" />
      </view>
      <view class="md-info-section">
        <view class="md-info">
          <view class="info-box">
            <view class="md-name">{{ mdData.name }}</view>
            <view class="md-address" v-if="mdData.distance || mdData.address">
              <text class="detail">{{ mdAddress }}</text>
            </view>
            <view class="shop-time" v-if="mdData.start_time">
              <text>{{ $t("shop.startTime") }}：</text>
              <text>{{ mdData.start_time + "~" + mdData.end_time }}</text>
            </view>
          </view>
          <view class="shop-detail">
            <text class="distance"
              >{{ $t("shop.distance") }}{{ mdData.distance }}</text
            >
            <view class="shop-icons" v-if="mdData.mobile">
              <view class="icon-box" @click.stop="guideToShop(mdData)">
                <i class="iconfont icon-map-filling1"></i>
              </view>
              <view class="icon-box" @click.stop="phoneToShop(mdData.mobile)">
                <i class="iconfont icon-phone"></i>
              </view>
            </view>
          </view>
        </view>
        <view class="md-select">
          <view class="md-status">{{
            isOpen(mdData) ? "营业中" : "已打样"
          }}</view>
          <!-- <view class="selectd-box" v-if="mdData.id">
            <i class="iconfont icon-seleted"></i>
          </view> -->
        </view>
      </view>
    </view>
    <view class="label-title">商城门店</view>
    <view
      class="md-box"
      @click="selectStore"
      :class="storageMd ? 'not-select' : ''"
    >
      <view class="md-logo">
        <image :src="storeMd.cover_url" mode="" />
      </view>
      <view class="md-info-section">
        <view class="md-info">
          <view class="info-box">
            <view class="md-name">{{ storeMd.name }}</view>
            <view class="md-address" v-if="storeMd.distance || storeMd.address">
              <text class="detail">{{ storeMdAddress }}</text>
            </view>
            <view class="shop-time" v-if="storeMd.start_time">
              <text>{{ $t("shop.startTime") }}：</text>
              <text>{{ storeMd.start_time + "~" + storeMd.end_time }}</text>
            </view>
          </view>
          <view class="shop-detail">
            <!-- <text class="distance" v-if="storeMd.distance"
              >{{ $t("shop.distance") }}{{ storeMd.distance }}</text
            > -->
            <view class="shop-icons" v-if="storeMd.mobile">
              <view class="icon-box" @click.stop="guideToShop(storeMd)">
                <i class="iconfont icon-map-filling1"></i>
              </view>
              <view class="icon-box" @click.stop="phoneToShop(storeMd.mobile)">
                <i class="iconfont icon-phone"></i>
              </view>
            </view>
          </view>
        </view>
        <view class="md-select">
          <view class="md-status">{{
            isOpen(storeMd) ? "营业中" : "已打样"
          }}</view>
          <!-- <view class="selectd-box" v-if="!storageMd">
            <i class="iconfont icon-seleted"></i>
          </view> -->
        </view>
      </view>
    </view>
    <view class="md-footer">
      <view class="footer-content">
        <view class="footer-btn" @click="selectOtherMd">{{
          $t("mdAdmin.chooseOther")
        }}</view>
      </view>
      <view class="safe"></view>
    </view>

    <!-- 全局过渡组件 -->
    <transitionPage></transitionPage>
  </view>
  <Shenhe v-else-if="shenheStatus == 1" ></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe'
export default {
  components: {Shenhe},
  data() {
    return {
      mdData: {},
      storeMd: {},
      storageMd: "",
      backUrl: "",
    };
  },
  computed: {
    mdAddress() {
      if (this.mdData.province_name) {
        return (
          this.mdData.province_name +
          " " +
          this.mdData.city_name +
          " " +
          this.mdData.district_name +
          " " +
          this.mdData.address
        );
      }
      if (this.mdData.address) {
        return this.mdData.address;
      }
      return "";
    },
    storeMdAddress() {
      if (this.storeMd.province_name) {
        return (
          this.storeMd.province_name +
          " " +
          this.storeMd.city_name +
          " " +
          this.storeMd.district_name +
          " " +
          this.storeMd.address
        );
      }
      if (this.storeMd.address) {
        return this.storeMd.address;
      }
      return "";
    },
  },
  onLoad(option) {
    if (option.url) {
      this.backUrl = option.url;
    }
  },
  onShow() {
    this.storeMd = {
      id: 0,
      name: this.stores.name,
      mobile: this.stores.mobile,
      cover_url: this.stores.web_log,
      pic_url: this.stores.store_share_logo, // logo
      shop_time: this.stores.shop_time || "",
      address: this.stores.address || "",
      city_name: this.stores.city_name || "",
      district_name: this.stores.district_name || "",
      province_name: this.stores.province_name || "",
      latitude: this.stores.latitude || "",
      longitude: this.stores.longitude || "",
      distance: this.stores.distance || "",
    };
    let mdLocalData = uni.getStorageSync("storeMdData");
    this.storageMd = mdLocalData;
    if (mdLocalData) {
      this.mdData = JSON.parse(mdLocalData);
    }
    // 判断是否登录
    const isLogin = this.$utils.isLogin(false);
    if (!isLogin) {
      this.$store.commit("setNoLoginTabarPath", "/pages/md/md-list");
      this.$store.commit("setRouteType", "redirectTo");
    } else {
      this.$store.commit("setNoLoginTabarPath", "");
      this.$store.commit("setRouteType", "");
    }
  },
  watch: {},

  methods: {
    selectOtherMd() {
      this.$utils.toUrl("/pages/md/md-list?url=" + this.backUrl);
    },
    selectStore() {
      this.storageMd = "";
      this.mdData.id = 0;
      uni.removeStorageSync("storeMdData");
      uni.setStorageSync("MdDataReload", "true");

      setTimeout(() => {
        let mdBackUrl = uni.getStorageSync("mdBackUrl");
        if (mdBackUrl) {
          uni.reLaunch({
            url: mdBackUrl,
          });
          return;
        }
        if (!this.backUrl) {
          uni.switchTab({
            url: "/pages/home/home",
          });
        } else {
          uni.reLaunch({
            url: this.backUrl,
          });
        }
      }, 300);
    },
    // 点击返回
    toBack() {
      this.$utils.goBack();
    },
    // 拨打商家电话
    phoneToShop(num) {
      this.$utils.makePhoneCall(num);
    },
    // 导航到店
    guideToShop(item) {
      if (!item.latitude) return;
      uni.openLocation({
        latitude: parseFloat(item.latitude),
        longitude: parseFloat(item.longitude),
      });
    },
    // 门店是否营业
    isOpen(item) {
      if (item.shop_time_type == 0) return true;
      if (!item.start_time) return true;
      let date = new Date();
      let hour = date.getHours();
      let minutes = date.getMinutes();
      let [startBefore, startAfter] = item.start_time.split(":");
      let [endBefore, endAfter] = item.end_time.split(":");
      if (hour >= startBefore && hour < endBefore) {
        return true;
      }
      return false;
    },
  },
};
</script>

<style lang="scss" scoped>
.md-page {
  width: 100%;
  height: 100%;
  background: #ffffff;
  position: relative;

  .label-title {
    padding-left: 24rpx;
    margin-top: 24rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: rgba(29, 29, 29, 0.94);
  }

  .md-box {
    width: 93.6%;
    background: #ffffff;
    border: 2px solid #f0250e;
    border-radius: 2.67vw;
    margin: 24rpx auto;
    display: flex;
    align-items: flex-start;
    padding: 30rpx 20rpx 20rpx 24rpx;
    position: relative;
    .md-logo {
      width: 50rpx;
      height: 50rpx;
      background: #f2f2f2;
      border: 1px solid #f8f8f8;
      border-radius: 8rpx;
      overflow: hidden;
      border: 1px solid #f7f7f7;
      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .md-info-section {
      width: 100%;
      .md-info {
        margin-left: 20rpx;
        flex: 1;
        display: flex;
        align-items: center;
        .info-box {
          width: 410rpx;
          border-right: 1px solid #f8f8f8;
          .md-name {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 600;
            color: #262626;
            max-width: 384rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .md-address {
            margin-top: 4rpx;
            max-width: 384rpx;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /* 这里是超出几行省略 */
            overflow: hidden;
            .detail {
              font-size: 24rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #8c8c8c;
            }
          }
          .shop-time {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #8c8c8c;
            margin-top: 4rpx;
          }
        }
        .shop-detail {
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          flex: 1;
          .distance {
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #8c8c8c;
            margin-bottom: 32rpx;
          }
          .shop-icons {
            display: flex;
            align-items: center;
            justify-content: center;
            .icon-box {
              width: 48rpx;
              height: 48rpx;
              background: #fbeceb;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              .iconfont {
                color: #f0250e;
              }
            }
            .icon-box:nth-child(2) {
              margin-left: 20rpx;
            }
          }
        }
      }
    }

    .md-select {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 20rpx;
      margin-top: 8rpx;
      .md-status {
        width: 80rpx;
        height: 32rpx;
        background: #f0250e;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
      .selectd-box {
        width: 30rpx;
        height: 30rpx;
        background: #f0250e;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        // align-items: center;
        .iconfont {
          color: #ffffff;
          font-size: 30rpx;
          font-weight: bold;
        }
      }
    }
  }

  .not-select {
    border: 2px solid #f2f2f2;
  }

  .md-footer {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 111;
    .footer-content {
      width: 100%;
      padding: 1.6vw 0;
      display: flex;
      justify-content: center;
      align-items: center;
      border-top: 1px solid #f0f1f3;
    }
    .footer-btn {
      width: 90.4vw;
      height: 10.134vw;
      border-radius: 5.067vw;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #ffffff;
      background: #f0250e;
    }
    .safe {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}
</style>
